{% load static %}
{% load i18n %}

<nav class="navbar navbar-top navbar-expand navbar-dashboard navbar-dark ps-0 pe-2 pb-0">
  <div class="container-fluid px-0">
    <div class="d-flex justify-content-between w-100" id="navbarSupportedContent">
      <div class="d-flex align-items-center">
        <!-- Search form -->
        <form class="navbar-search form-inline" id="navbar-search-main">
          <div class="input-group input-group-merge search-bar">
            <span class="input-group-text" id="topbar-addon">
              <svg class="icon icon-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                  clip-rule="evenodd"></path>
              </svg>
            </span>
            <input type="text" class="form-control" id="topbarInputIconLeft" placeholder="{% trans 'Search' %}"
              aria-label="{% trans 'Search' %}" aria-describedby="topbar-addon">
          </div>
        </form>
        <!-- / Search form -->
      </div>
      <!-- Navbar links -->
      <ul class="navbar-nav align-items-center">
        {% if request.user.is_authenticated %}
        
        <li class="nav-item dropdown">
          <a class="nav-link text-dark notification-bell read dropdown-toggle" id="notificationToggle" data-unread-notifications="true" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
            <svg class="icon icon-sm text-gray-900" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
            <span id="notification-count" class="badge bg-danger rounded-circle" style="display: none;">0</span>
          </a>
          <div class="dropdown-menu dropdown-menu-lg dropdown-menu-start mt-2 py-0" id="notificationDropdown">
            <div class="dropdown-header d-flex align-items-center justify-content-between">
              <h5 class="m-0">{% trans "Notificações" %}</h5>
              <div>
                <a href="#" class="btn btn-link btn-sm" id="mark-as-read" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Marcar como lidas' %}">
                  <i class="bi bi-check-circle text-success"></i>
                </a>
                <a href="#" class="btn btn-link btn-sm text-danger" id="clear-all" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Limpar todas as notificações' %}">
                  <i class="bi bi-x-circle text-danger"></i>
                </a>
              </div>
            </div>
            <div class="list-group list-group-flush" id="notification-list" style="max-height: calc(100vh - 215px); overflow-y: auto;">
              <p class="text-muted text-center mt-3">{% trans "Nenhuma notificação" %}</p>
            </div>
            <a href="{% url 'notification:all_notifications' %}" class="dropdown-item text-center fw-bold rounded-bottom py-3">
              <svg class="icon icon-xxs text-gray-400 me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
              </svg>
              {% trans "Ver todas as notificações" %}
            </a>
          </div>
        </li>               
        
          <li class="nav-item dropdown ms-lg-3">
            <a class="nav-link dropdown-toggle pt-1 px-0" href="#" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              <div class="media d-flex align-items-center">
                {% if user.avatar %}
                  <img class="avatar rounded-circle" style="background-color: #cbd5e1;" src="{% url 'serve_files:serve_decrypted_file' 'home' 'user' 'avatar' user.uuid %}" alt="User-Profile-Image" class="user-avtar wid-35" />
                {% else %}
                  <img class="avatar rounded-circle" style="background-color: #cbd5e1;" alt="Image placeholder" src="{% static 'assets/img/team/generic_user.png' %}">
                {% endif %}
                <div class="media-body ms-2 text-dark align-items-center d-none d-lg-block">
                  <span class="mb-0 font-small fw-bold text-gray-900">{{ request.user }}</span>
                </div>
              </div>
            </a>
            <div class="dropdown-menu dashboard-dropdown dropdown-menu-end mt-2 py-1">
              <a class="dropdown-item d-flex align-items-center" href="{% url 'profile' %}">
                <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                    clip-rule="evenodd"></path>
                </svg>
                {% trans "Meu Perfil" %}
              </a>

              <a class="dropdown-item d-flex align-items-center" href="{% url 'password_change' %}">
                <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z"
                    clip-rule="evenodd"></path>
                </svg>
                {% trans "Mudar Senha" %}
              </a>

              {% if request.user.is_staff %}
              <div role="separator" class="dropdown-divider my-1"></div>
              <div class="dropdown-submenu-manual">
                <a class="dropdown-item d-flex align-items-center" href="#" id="configToggle">
                  <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M11.3 1.046a1 1 0 011.4 0l1.8 1.8a1 1 0 010 1.4L6.207 12.54a1 1 0 01-.516.27l-3.286.657a.5.5 0 01-.588-.588l.657-3.286a1 1 0 01.27-.516L11.3 1.046zM4.5 13l2.5-.5.5-2.5-1.5-1.5-2.5.5-.5 2.5L4.5 13z"
                      clip-rule="evenodd" />
                  </svg>
                  {% trans "Configurações" %}
                </a>
                <div class="submenu-items mt-1 ms-4 d-none" id="configSubmenu">
                  <a class="dropdown-item" href="{% url 'server:api_config_panel' %}">{% trans "API" %}</a>
                  <a class="dropdown-item" href="{% url 'wallet:coin_config_panel' %}">{% trans "Moedas" %}</a>
                  <a class="dropdown-item" href="{% url 'shop:dashboard' %}">{% trans "Shop" %}</a>
                  <a class="dropdown-item" href="{% url 'server:configure_service_prices' %}">{% trans "Services" %}</a>
                </div>                
              </div>
            {% endif %}

              <div role="separator" class="dropdown-divider my-1"></div>
              <a class="dropdown-item d-flex align-items-center" href="{% url 'server:account_dashboard' %}">
                <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd"
                    d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                    clip-rule="evenodd" />
                </svg>
                {% trans "Conta L2" %}
              </a>

              <a class="dropdown-item d-flex align-items-center" href="{% url 'wallet:dashboard' %}">
                <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M21 7H3a1 1 0 00-1 1v8a1 1 0 001 1h18a1 1 0 001-1V8a1 1 0 00-1-1zM3 9h18v6H3V9zm16 2h-2a1 1 0 100 2h2a1 1 0 100-2z"/>
                </svg>
                <span>{% trans "Carteira" %}</span>
              </a>

              <a class="dropdown-item d-flex align-items-center" href="{% url 'inventory:inventario_dashboard' %}">
                <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M4 4h16v2H4V4zm0 4h16v2H4V8zm0 4h10v2H4v-2zm0 4h10v2H4v-2z"/>
                </svg>
                <span>{% trans "Inventário" %}</span>
              </a>

              <a class="dropdown-item d-flex align-items-center" href="{% url 'auction:listar_leiloes' %}">
                <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 2L2 7v2c0 5.25 3.75 9.75 10 12 6.25-2.25 10-6.75 10-12V7l-10-5zm0 2.18l7.5 3.64v1.18c0 4.11-2.94 7.8-7.5 9.71-4.56-1.91-7.5-5.6-7.5-9.71V7l7.5-3.64zM11 10v5h2v-5h-2zm0-4v2h2V6h-2z"/>
                </svg>
                <span>{% trans "Leilões" %}</span>
              </a>              
            
              <div role="separator" class="dropdown-divider my-1"></div>

              <a class="dropdown-item d-flex align-items-center" href="{% url 'logout' %}">
                <svg class="dropdown-icon text-danger me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1">
                  </path>
                </svg>
                {% trans "Sair" %}
              </a>
            </div>
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>
